<template>
  <div>
    <template v-if="listData.length > 0">
      <el-table :data="listData">
        <el-table-column label="房屋名称" align="left" width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.communityName}}/{{scope.row.roomName}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="收费项目" align="center" prop="chargeId" width="120" :formatter="itemFormat" />-->
        <el-table-column label="收费标准" align="left" width="120" prop="normNames">
          <template slot-scope="scope">
            <span v-if="scope.row.projectId=='03'">{{itemFormat(scope.row)}}</span>
            <span v-else>{{scope.row.normNames}}</span>
          </template>
        </el-table-column>

        <el-table-column label="应收日期" align="center" prop="receivableTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.receivableTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计费开始日期" align="center" prop="beginTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计费结束日期" align="center" prop="finishTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="prices" width="100"/>
        <el-table-column label="应收金额" align="center" prop="receivableMoney" width="100"/>
        <el-table-column label="实收金额" align="center" prop="billMoney" width="100"/>
        <el-table-column label="冲抵金额" align="center" prop="amountAmount" width="100"/>
        <el-table-column label="优惠政策" align="center" prop="favouredPolicyName" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.favouredPolicyName">{{scope.row.favouredPolicyName}}</span>
            <span v-else>{{policyFormat(scope.row.preferentialId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠金额" align="center" prop="specialMoney" width="100"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="initForm"
      />
    </template>
    <el-empty v-else :image-size="50" description="无缴费记录">
    </el-empty>
  </div>
</template>

<script>

  import {listrReceiptRecord} from "@/api/payfee/receipt";
  import {listFavouredPolicy} from "@/api/payfee/favouredPolicy";
  import { listItem } from "@/api/payfee/item";

  export default {
    name: "paymentRecord",
    data() {
      return {
        //欠费列表
        listData: [],
        queryParams: {
          pageNum:1,
          pageSize:10,
          ownerId: null
        },
        total:0,
        listFavouredPolicyOptions: [],
        itemOptions:[]
      }
    },
    watch: {
      customForm() {
        this.initForm()
      }
    },
    created() {
      this.initForm
      listFavouredPolicy({communityId: this.customForm.communityId || -1}).then(res => {
        this.listFavouredPolicyOptions = res.rows
      })
      listItem().then(res=>{
        this.itemOptions = res.rows;
      })
    },
    methods: {
      initForm() {
        this.queryParams.ownerId = this.customForm.customId
        listrReceiptRecord(this.queryParams).then(res => {
          this.listData = res.rows
          this.total = res.total
        })
      },
      policyFormat(favouredPolicyId) {
        let index = this.listFavouredPolicyOptions.findIndex(x => x.favouredPolicyId == favouredPolicyId);
        if (index != -1) {
          return this.listFavouredPolicyOptions[index].favouredPolicyName
        }
        return '';
      },
      // 收费项目字典翻译
      itemFormat(row) {
        let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
        if(index != -1){
          return this.itemOptions[index].chargeName
        }
        return '';
      },
    },
    props: {
      customForm: {
        type: Object,
        default: () => {
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: #f2f2f2 !important;
  }

</style>
